<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册会员</title>
  <style>
    body {
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      font-family: "Microsoft Yahei", sans-serif;
    }
    .form-container {
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 20px;
      width: 350px;
    }
    .form-title {
      color: #0066cc; /* 改为蓝色 */
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    .form-item {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
    }
    .form-label {
      width: 80px;
      text-align: right;
      margin-right: 10px;
      font-size: 14px;
    }
    .form-input {
      flex: 1;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    .required {
      color: red;
      font-size: 12px;
      margin-left: 5px;
    }
    .captcha-group {
      display: flex;
      align-items: center;
      flex: 1;
    }
    .captcha-code {
      background-color: #f0f0f0;
      padding: 5px 10px;
      border: 1px solid #ccc;
      margin-right: 5px;
      font-family: "Courier New", monospace;
      letter-spacing: 2px;
    }
    .refresh-captcha {
      background-color: #fff;
      border: 1px solid #0066cc;
      color: #0066cc;
      padding: 5px 8px;
      border-radius: 3px;
      cursor: pointer;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .refresh-icon {
      width: 14px;
      height: 14px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M23 4v6h-6'/%3E%3Cpath d='M1 20v-6h6'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: contain;
    }
    .radio-group {
      display: flex;
    }
    .radio-item {
      margin-right: 20px;
      display: flex;
      align-items: center;
    }
    .select-group {
      display: flex;
    }
    .select-item {
      flex: 1;
      margin-right: 5px;
    }
    .salary-group {
      display: flex;
      align-items: center;
    }
    .salary-slider {
      flex: 1;
      margin-right: 10px;
    }
    .salary-value {
      width: 60px;
      text-align: right;
    }
    .hobby-item {
      margin-right: 10px;
    }
    .file-group {
      display: flex;
    }
    .file-button {
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 5px 10px;
      border-radius: 3px;
      cursor: pointer;
    }
    .file-text {
      margin-left: 5px;
      font-size: 12px;
      color: #666;
    }
    .textarea {
      width: 100%;
      height: 100px;
      border: 1px solid #ccc;
      border-radius: 3px;
      resize: vertical;
    }
    .btn-group {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
    .form-btn {
      padding: 5px 20px;
      border: 1px solid #ccc;
      border-radius: 3px;
      background-color: #f0f0f0;
      cursor: pointer;
      margin: 0 5px;
    }
  </style>
</head>
<body>
  <div class="form-container">
    <div class="form-title">欢迎注册会员</div>
    <form>
      <div class="form-item">
        <label class="form-label">手机号码：</label>
        <input type="text" class="form-input" placeholder="11位手机号">
        <span class="required">必填</span>
      </div>
      <div class="form-item">
        <label class="form-label">创建密码：</label>
        <input type="password" class="form-input" placeholder="8位密码">
        <span class="required">必填</span>
      </div>
      <div class="form-item">
        <label class="form-label">注册邮箱：</label>
        <input type="email" class="form-input" placeholder="例如:wustzz@sina.com">
        <span class="required">必填</span>
      </div>
      <div class="form-item">
        <label class="form-label">验证码：</label>
        <div class="captcha-group">
          <input type="text" class="form-input" style="width: 100px;">
          <div class="captcha-code">UJFG</div>
          <button type="button" class="refresh-captcha">
            <div class="refresh-icon"></div>
          </button>
        </div>
      </div>
      <div class="form-item">
        <label class="form-label">性别：</label>
        <div class="radio-group">
          <div class="radio-item">
            <input type="radio" name="gender" checked> 男
          </div>
          <div class="radio-item">
            <input type="radio" name="gender"> 女
          </div>
        </div>
      </div>
      <div class="form-item">
        <label class="form-label">生日：</label>
        <input type="text" class="form-input" placeholder="年/月/日">
      </div>
      <div class="form-item">
        <label class="form-label">年龄：</label>
        <input type="text" class="form-input">
      </div>
      <div class="form-item">
        <label class="form-label">籍贯：</label>
        <div class="select-group">
          <select class="form-input select-item">
            <option>湖北省</option>
          </select>
          <select class="form-input select-item">
            <option>武汉</option>
          </select>
        </div>
      </div>
      <div class="form-item">
        <label class="form-label">个人学历：</label>
        <select class="form-input">
          <option>本科</option>
        </select>
      </div>
      <div class="form-item">
        <label class="form-label">月薪：</label>
        <div class="salary-group">
          <input type="range" class="salary-slider" min="0" max="10000" value="5000" oninput="document.getElementById('salaryValue').value = this.value">
          <input type="text" id="salaryValue" class="form-input salary-value" value="5000" readonly>
        </div>
      </div>
      <div class="form-item">
        <label class="form-label">个人爱好：</label>
        <div>
          <input type="checkbox" checked> 唱歌
          <input type="checkbox" checked> 跑步
          <input type="checkbox" checked> 游泳
        </div>
      </div>
      <div class="form-item">
        <label class="form-label">个人照片：</label>
        <div class="file-group">
          <button type="button" class="file-button">选择文件</button>
          <span class="file-text">未选择任何文件</span>
        </div>
      </div>
      <div class="form-item">
        <label class="form-label">个人简介：</label>
        <textarea class="textarea"></textarea>
      </div>
      <div class="btn-group">
        <button type="submit" class="form-btn">提交</button>
        <button type="reset" class="form-btn">重置</button>
      </div>
    </form>
  </div>
</body>
</html>